<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport"
		content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
	<title>30分钟我能搓出来一个什么样的生日祝福页...</title>
	<style>
		body {
			/*width: 100%;
				height: 100vh;*/
			overflow: auto;
			/*background-image: url(Minecraft.png);*/
		}

		div {
			width: 62%;
			margin-top: 40%;
			margin: auto;
		}

		div button {
			min-width: 80px;
			height: 50px;
			font-size: 20px;
			display: inline-block;
			width: fit-content;
		}

		h1 {
			font-size: 1.5em;
		}

		h1#bigAlert {
			font-size: 2.2em;
			/*color: red;*/
		}

		p {
			font-size: 1em;
		}

		span.slc {
			font-size: 1.5em;
		}

		span.final {
			font-size: 1.5em;
		}

		#cursor,
		#fan,
		#keyboard {
			user-select: none;
		}

		#fan {
			position: absolute;
			top: 0;
			left: 0;
			width: 6rem;
			cursor: grab;
		}

		#cursor {
			position: absolute;
			top: 0;
			left: 0;
			width: 1.5rem;
		}

		.main-pic {
			max-width: 500px;
			display: inline-block;
			width: 100%;
		}

		.side-pic {
			max-width: 200px;
			display: inline-block;
		}
	</style>
</head>

<body>
	<div>
		<h1 id="bigAlert"></h1>
		<h1 id="questionArea"></h1>
		<p id="p"></p>
		<button id="yes"></button>
		<button id="no"></button>
	</div>
</body>
<script>
	var bigAlertEl = document.getElementById("bigAlert");
	var yes = document.getElementById("yes");
	var no = document.getElementById("no");
	var questionArea = document.getElementById("questionArea");
	var p = document.getElementById("p");
	function bigAlert(msg, t = 1000) {
		bigAlertEl.innerText = msg;
		bigAlertEl.style.display = "block";
		setTimeout(() => {
			bigAlertEl.style.display = "none";
			bigAlertEl.innerText = "";
		}, t);
	}
	var page = -1;
	const dataParams = [
		{
			question: "你好！",
			yesText: "OK",
			noText: "不 OK",
			insert: `<p>如果你看见了这个糟糕的页面，它丑陋无比，说明我大概成功在 30 分钟之内，制作完了你要看到的所有东西（）</p><p>这玩意很可能做得很没脑子，求一个快了（）</p><p>你要继续吗（）</p><img src="static/stickers/WeChat截图_20240409181844.png" class="main-pic" />`,
			functionInsert: () => {

			},
			yesOnclick: () => {
				switchPage();
			},
			noOnclick: () => {
				bigAlert("（我可能不太会让你点这个（但是你可以现在关闭这个页面然后结束这糟糕的一切（）", 1800);
				no.style.display = "none";
			}
		},
		{
			question: "介绍一下（",
			yesText: "行（",
			noText: "",
			insert: `<p>你会在接下来的一个页面获得一个按钮，你可以点击它，于是会出现一张图片和我给出的评价（同时你会有不看这些烦人评价的选项）。</p><p>图片的来源是你发送的邮件中我保存的部分（</p><p>还可能会抽出一些我最近常常使用的异形表情包（我的意思是邮件发不了表情包会让我作为一个现代人本来缺失的语言能力更加经受考验.... 把数月没发的表情包一次性发了吧（）</p>`,
			functionInsert: () => {
				no.style.display = "none";
			},
			yesOnclick: () => {
				switchPage()
			}
		},
		{
			question: "抽一张）",
			yesText: "真没意思，不玩了",
			noText: "",
			insert: `
				<p id="cglSays">点下面的按钮抽一张吧（）</p>
				<img src="" id="pic" class="main-pic" />
				<button id="rock" style="display:block;">Fire</button>
				`,
			functionInsert: () => {
				no.style.display = "none";
				const d = document.getElementById("rock");
				d.addEventListener("click", () => {
					let choosed = {};
					if(localStorage.choosed) choosed = JSON.parse(localStorage.choosed);
					const data = [
						{ "name": "GKdd0sWaEAAFYn1.jpeg", "w": "*这是一张网图，但是放进来了，如果你抽到可以作出评价并给我回复", "type": "image" },
						{ "name": "JPEG_1692948306843_edit_11751671580497.jpg", "w": "或许至今仍然没有人做出这个东西的正确答案...", "type": "image" },
						{ "name": "JPEG_1698273615589.jpg", "w": "或许至今仍然没有人做出这个东西的正确答案...", "type": "image" },
						{ "name": "mmexport1696865495264.jpg", "w": "🐺说，你是人，不是机器，于是我便成了机器", "type": "image" },
						{ "name": "mmexport1701349536731.jpg", "w": "一道精妙绝伦的物理题，希望你会喜欢", "type": "image" },
						{ "name": "QQMail_1704880385930.jpg", "w": "因为你终其一生都在创造一个名为“自己”的艺术品", "type": "image" },
						{ "name": "QQMail_1704880406413.jpg", "w": "手越脏，实力越强", "type": "image" },
						{ "name": "QQMail_1704880411716.jpg", "w": "这是北京的雪，曾是令人羡慕的雪", "type": "image" },
						{ "name": "QQMail_1704880415464.jpg", "w": "这是北京的雪，曾是令人羡慕的雪", "type": "image" },
						{ "name": "QQMail_1704880420966.jpg", "w": "这是北京的雪，曾是令人羡慕的雪", "type": "image" },
						{ "name": "QQMail_1704880424189.jpg", "w": "这是北京的雪，曾是令人羡慕的雪", "type": "image" },
						{ "name": "QQMail_1704880431195.jpg", "w": "这是北京的雪，曾是令人羡慕的雪", "type": "image" },
						{ "name": "QQMail_1704880434761.jpg", "w": "这是北京的雪，曾是令人羡慕的雪", "type": "image" },
						{ "name": "QQMail_1704880440489.jpg", "w": "可爱！", "type": "image" },
						{ "name": "QQMail_1704880453429.jpg", "w": "仍然不觉得这个像敬爱的陈博丰老师（？", "type": "image" },
						{ "name": "QQMail_1704880455100.jpg", "w": "你的帽子和或许是我的fufu", "type": "image" },
						{ "name": "QQMail_1705878589879.jpg", "w": "这是长沙的雪，是令人欣喜的雪", "type": "image" },
						{ "name": "QQMail_1706633012880.jpg", "w": "可爱", "type": "image" },
						{ "name": "QQMail_1708342104068.jpg", "w": "困难的数学题，难以做出的数学题", "type": "image" },
						{ "name": "QQMail_1708344199946.jpg", "w": "错误的数学题解法，以及至今没有跟你说正确解法", "type": "image" },
						{ "name": "QQMail_1709221560330.jpg", "w": "奇怪的数学题，就是猪里脊也难以做出", "type": "image" },
						{ "name": "wx_camera_1712148100045.jpg", "w": "清明假期两天不见，久别重逢。", "type": "image" },
						{ "name": "wx_camera_1712377691656.jpg", "w": "谢谢，很喜欢", "type": "image" },
						{ "name": "stickers/788D402C6C0CAB064A99945240497143_0.gif", "w": "嘿嘿", "type": "sticker" },
						{ "name": "stickers/WeChat截图_20240409181740.png", "w": "诶...?", "type": "sticker" },
						{ "name": "stickers/WeChat截图_20240409181753.png", "w": "QwQ", "type": "sticker" },
						{ "name": "stickers/WeChat截图_20240409181758.png", "w": "难过", "type": "sticker" },
						{ "name": "stickers/WeChat截图_20240409181803.png", "w": "开心！", "type": "sticker" },
						{ "name": "stickers/WeChat截图_20240409181810.png", "w": "啊...?", "type": "sticker" },
						{ "name": "stickers/WeChat截图_20240409181817.png", "w": "啊这", "type": "sticker" },
						{ "name": "stickers/WeChat截图_20240409181827.png", "w": "嘿嘿！！！", "type": "sticker" },
						{ "name": "stickers/WeChat截图_20240409181832.png", "w": "啊哈！！！", "type": "sticker" },
						{ "name": "stickers/WeChat截图_20240409181838.png", "w": "QaQ", "type": "sticker" },
						{ "name": "stickers/WeChat截图_20240409181844.png", "w": "猫猫听完都死了", "type": "sticker" },
						{ "name": "stickers/WeChat截图_20240409181852.png", "w": "猫猫听完都死了", "type": "sticker" },
						{ "name": "stickers/WeChat截图_20240409181858.png", "w": "呃... 死了", "type": "sticker" },
						{ "name": "stickers/WeChat截图_20240409181903.png", "w": "好耶", "type": "sticker" },
						{ "name": "stickers/WeChat截图_20240409181908.png", "w": "好耶", "type": "sticker" },
						{ "name": "stickers/WeChat截图_20240409181913.png", "w": "嘿嘿", "type": "sticker" },
						{ "name": "stickers/WeChat截图_20240409181919.png", "w": "咕咕咕", "type": "sticker" },
					];
					const canUse=data
						.filter(function(m, index){
							m.index = index;
							return !choosed[m.name];
						});
					if (canUse.length==0) {
						alert("都抽完啦！")
						localStorage.removeItem("choosed");
						switchPage();
						return;
					}
					canUse
						.map(function(m){
							return Object.assign({
								score: Math.random()
							}, m);
						})
						.sort(function(a, b){
							return a.score - b.score;
						})
						.slice(0, 1)
						.map(function(m){
							choosed[m.name] = 1;
							localStorage.choosed = JSON.stringify(choosed);
							document.getElementById("pic").src=`static/${m.name}`;
							document.getElementById("cglSays").innerHTML="cgluWxh 说: "+m.w;
						});
				})
			},
			yesOnclick: () => {
				switchPage()
			}
		},
		{
			question: "",
			insert: `<div id="flexbox">
				<p color1="#39c5bb" color2="#ffffff">生日快乐 QwQ</p>
				<p color1="#39c5bb" color2="#ffffff">生日快乐 QwQ</p>
				<p color1="#39c5bb" color2="#ffffff">生日快乐 QwQ</p>
				<p color1="#39c5bb" color2="#ffffff">生日快乐 QwQ</p>
				<p color1="#39c5bb" color2="#ffffff">生日快乐 QwQ</p>
				<p color1="#39c5bb" color2="#ffffff">生日快乐 QwQ</p>
				<p color1="#39c5bb" color2="#ffffff">生日快乐 QwQ</p>
				<p color1="#39c5bb" color2="#ffffff">生日快乐 QwQ</p>
				<p color1="#39c5bb" color2="#ffffff">生日快乐 QwQ</p>
				</div>
				<style>
					div#flexbox {
					position: fixed;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					margin: 0;
					padding: 0;
					width: 100%;
					height: 100%;
				}

				div#flexbox p {
					margin: 0;
					width: 100%;
					flex: 1;
					padding: 0;
					font-size: 3em;
					text-align: center;
				}
				</style>
				`,
			functionInsert() {
				yes.style.display = "none";
				no.style.display = "none";
				let active = false;
				const d = document.querySelectorAll("p:not(#p)");
				const k = () => {
					for (let i = 0; i < d.length; i++) {
						let nowActive;
						if (i % 2 == 0) nowActive = active;
						else nowActive = !active;
						if (nowActive) {
							const el = d[i];
							el.style.background = el.getAttribute("color1");
							el.style.color = el.getAttribute("color2");
						} else {
							const el = d[i];
							el.style.background = el.getAttribute("color2");
							el.style.color = el.getAttribute("color1");
						}
					}
					active = !active;
				};
				k();
				setInterval(k, 1000);
			}
		}
	];
	function switchPage(pg = false) {
		if (pg === false) page++;
		else page = pg;
		const nowPage = dataParams[page];
		questionArea.innerHTML = nowPage.question || "";
		yes.innerText = nowPage.yesText || "";
		no.innerText = nowPage.noText || "";
		p.innerHTML = nowPage.insert || "";
		yes.style.display = "inline-block";
		no.style.display = "inline-block";
		yes.onclick = nowPage.yesOnclick || "";
		no.onclick = nowPage.noOnclick || "";
		nowPage.functionInsert && nowPage.functionInsert();
	}
	window.onload = function () {
		switchPage();
	}
</script>

</html>